<!-- 文本输入框 -->
<template>
  <div class="text" @dragover="showup = true">
    <div style="display: flex;height: 40px;align-items: center;padding: 0 20px">
      <el-upload
        class="upload-demo"
        :drag="true"
        :before-upload="startUpload"
        action="/wechatwebsite/fileController/uploadFile.do"
        :data="{memberId: user.memberId}"
        :on-success="upSucced"
        :on-progress="showProgress"
      >
        <img style="width:1.8rem;height:1.8rem;margin-top:0.2rem;" src="../../assets/file.png" alt />
      </el-upload>
      <button class="smileHead" @click="faceContent"></button>
      <el-progress
        style="width: 200px;margin-left:20px"
        :percentage="percent"
        v-if="percent"
        :status="status"
      ></el-progress>
    </div>
    <div class="browBox" v-if="faceShow">
      <ul>
        <li v-for="(item,index) in faceList" :key="index" @click="getBrow(index)">{{item}}</li>
      </ul>
    </div>
    <div class="upload-drag" v-if="showup" @dragleave="leave" @drop="showup = false">
      <el-upload
        class="upload-drag"
        :drag="true"
        :before-upload="startUpload"
        action="/wechatwebsite/fileController/uploadFile.do"
        :data="{memberId: user.memberId}"
        :on-success="upSucced"
        :on-progress="showProgress"
      ></el-upload>
    </div>
    <textarea
      style="border: 0"
      ref="text"
      v-model="content"
      @keyup="onKeyup"
      @click="showEmoji=false"
    ></textarea>
    <!-- <quillEditor v-model="content" @keyup.enter="onKeyup" @click="showEmoji=false" ref="text" :options="editorOption" 
          @blur="onEditorBlur($event)" @ready="onEditorReady" @focus="onEditorFocus($event)" @change="onEditorChange($event)">
    </quillEditor>-->
    <div class="send" @click="send">
      <span>发送(s)</span>
    </div>
    <transition name="appear">
      <div class="warn" v-show="warn">
        <div class="description">不能发送空白信息</div>
      </div>
    </transition>
  </div>
</template>

<script>
const appData = require("@/assets/emojis.json");
import { quillEditor } from "vue-quill-editor"; //调用编辑器
// 引入样式，此时样式是直接从quill文件中直接引入
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { mapGetters, mapState } from "vuex";

export default {
  name: "editor",
  components: { quillEditor },
  data() {
    return {
      // content: '',
      percent: 0,
      inderval: () => {},
      status: "",
      reply: "未找到",
      frequency: 0,
      warn: false,
      showEmoji: false,
      list: [],
      ws: null,
      content: "",
      showup: false,
      editorOption: {
        modules: {
          toolbar: []
        },
        placeholder: ""
      },
      textConent: [],
      faceList: [],
      faceShow: false,
      getBrowString: ""
    };
  },
  computed: {
    ...mapState([
      "selectId",
      "emojis",
      "user",
      "toMemberId",
      "model",
      "selectGroupId",
      "selectGroupName"
    ]),
    ...mapGetters(["selectedChat"]),
    editor() {
      return this.$refs.text.quill;
    }
  },
  created() {},
  methods: {
    // 表情
    faceContent() {
      this.faceShow = !this.faceShow;
      if (this.faceShow == true) {
        for (let i in appData) {
          this.faceList.push(appData[i].char);
        }
      } else {
        this.faceList = [];
      }
    },
    // 获取用户点击之后的标签 ，存放到输入框内
    getBrow(index) {
      for (let i in this.faceList) {
        if (index == i) {
          this.getBrowString = this.faceList[index];
          this.content += this.getBrowString;
        }
      }
    },
    onEditorBlur() {}, // 失去焦点事件
    onEditorFocus() {}, // 获得焦点事件
    onEditorChange() {}, // 内容改变事件
    onEditorReady(quill) {
      this.$set(this.get, "quill", quill);
      // 按键绑定
      this.get.quill.keyboard.addBinding({ key: "B" }, this.keyBindFn);
    },
    keyBindFn() {
      let vm = this;
      console.log("1 :", 1);
    },
    startUpload(e) {
      this.percent = 0;
      let index = 0;
      this.inderval = setInterval(() => {
        index += (100 - index) / 10;
        this.percent = Math.floor(index);
      }, 500);
    },
    showProgress(e) {},
    upSucced({ data }) {
      clearInterval(this.inderval);
      this.percent = 100;
      this.status = "success";
      if (data.type == "img") {
        this.content = `img[${data.src}]`;
      } else {
        this.content = `file(${data.src})[${data.name}]`;
      }
      this.percent = 0;
      this.send();
    },
    // 按回车发送信息
    onKeyup(e) {
      if (e.keyCode === 13) {
        this.send();
      }
    },
    // 点击发送按钮发送信息
    async send() {
      if (this.content.length <= 1) {
        this.warn = true;
        this.content = "";
        setTimeout(() => {
          this.warn = false;
        }, 1000);
      } else {
        // 单聊
        if (this.model == 1) {
          var msg = {
            type: "friend",
            content: this.content,
            flag: true
          };

          let params = new FormData();
          params.append("fromMemberId", this.user.memberId);
          params.append("toMemberId", this.toMemberId);
          params.append("content", this.content);

          let content = {
            mine: {
              avatar: this.user.img || "",
              content: this.content,
              id: this.user.memberId,
              mine: true,
              username: this.user.name
            },
            to: {
              avatar: "images/default.png",
              // "id": this.user.memberId,
              id: this.toMemberId,
              sign: "无个性,不签名",
              type: "friend",
              username: "xsx"
            }
          };

          this.$emit("send", content);

          const { data: res } = await this.$http.post(
            "/api/mMessage/saveMessage.do",
            params
          );
          this.$store.dispatch("sendMessage", msg);
        } else {
          var msg = {
            id: this.selectGroupId,
            type: "group",
            content: this.content,
            flag: true
          };

          const { data: object } = await this.$http.get(
            `/api/group/getMemberByGroupId.do?groupId=${this.selectGroupId}`
          );

          let memberList = [];
          object.object.forEach(item => {
            memberList.push(item.memberId);
          });

          let params = new FormData();
          params.append("memberId", this.user.memberId);
          params.append("groupId", this.selectGroupId);
          params.append("content", this.content);

          let content = {
            mine: {
              avatar: this.user.img || "",
              content: this.content,
              id: this.user.memberId,
              mine: true,
              username: this.user.name
            },
            to: {
              avatar: "images/default.png",
              id: this.selectGroupId,
              // "name": this.selectGroupName,
              name: "233",
              type: "group",
              memberList: [120, ...memberList]
            }
          };
          console.log(JSON.stringify(content));

          this.$emit("send", content);

          const { data: res } = await this.$http.post(
            "/api/mMessage/saveMessage.do",
            params
          );
          this.$store.dispatch("sendMessage", msg);
        }
        this.content = "";
        this.faceShow = false;
      }
    },
    leave() {
      this.showup = false;
    }
  },
  // 在进入的时候 聚焦输入框
  mounted() {
    this.$refs.text.focus();
  },
  watch: {
    // 在选择其它对话的时候 聚焦输入框
    selectId() {
      setTimeout(() => {
        this.$refs.text.focus();
      }, 0);
    },
    // 当输入框中的值为空时 弹出提示  并在一秒后消失
    content() {
      if (this.content === "") {
        if (this.frequency === 0) {
          this.warn = true;
          this.frequency++;
          setTimeout(() => {
            this.warn = false;
          }, 1000);
        }
      }
    }
  }
};
</script>

<style lang="stylus" scoped>
.text {
  position: relative;
  background: #fff;
  height: 200px;
  border-top: 1px solid #ccc;

  textarea {
    box-sizing: border-box;
    padding: 10px 5px;
    height: 100%;
    width: 100%;
    outline: none;
    font-size: 14px;
    color: #666;
    font-family: 'Micrsofot Yahei';
    resize: none;
  }

  .send {
    position: absolute;
    bottom: 10px;
    right: 30px;
    width: 75px;
    height: 28px;
    line-height: 28px;
    box-sizing: border-box;
    text-align: center;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    background: #f5f5f5;
    font-size: 14px;
    color: #7c7c7c;

    &:hover {
      background: rgb(18, 150, 17);
      color: #fff;
    }
  }

  .warn {
    position: absolute;
    bottom: 50px;
    right: 10px;
    width: 110px;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    text-align: center;
    border: 1px solid #bdbdbd;
    border-radius: 4px;
    box-shadow: 0 1px 5px 1px #bdbdbd;

    &.appear-enter-active, &.appear-leave-active {
      transition: all 1s;
    }

    &.appear-enter, &.appear-leave-active {
      opacity: 0;
    }

    &:before {
      content: ' ';
      position: absolute;
      top: 100%;
      right: 20px;
      border: 7px solid transparent;
      border-top-color: #fff;
      filter: drop-shadow(1px 3px 2px #bdbdbd);
    }
  }
}
</style>

<style>
.quill-editor {
  height: 100%;
}
.quill-editor .ql-toolbar {
  display: none;
}
.browBox {
  width: 320px;
  height: 150px;
  background: #e6e6e6;
  border: solid 1px gray;
  position: absolute;
  bottom: 202px;
  overflow-y: scroll;
}
.browBox ul {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
}
.browBox li {
  width: 14%;
  margin: 3px 0;
  font-size: 24px;
  list-style: none;
  text-align: center;
}
.smileHead {
  width: 1.8rem;
  height: 1.8rem;
  margin-top: 0.2rem;
  margin-left: 1rem;
  border: none;
  border-radius: 50%;
  background-color: transparent;
  background-image: url("../../assets/smile.png");
  background-size: 100% 100%;
  outline: none;
}
.quill-editor .ql-container {
  border: 0 !important;
}
.upload-demo .el-upload-dragger {
  height: 38px;
  width: 100px;
  margin-top: 6px;
  opacity: 0.7;
}
.upload-drag {
  height: 100%;
  width: 100%;
}
.upload-drag .el-upload {
  height: 100%;
  width: 100%;
  margin-top: 6px;
  opacity: 0.7;
}
.upload-drag .el-upload .el-upload-dragger {
  height: 100%;
  width: 100%;
  margin-top: 6px;
  opacity: 0.7;
}
@media screen and (max-width: 720px) {
  　.friendinfo > .text {
    height: 50px !important;
    display: flex;
  }
  .text textarea {
    height: 50px !important;
  }
  .text .send {
    height: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    background: #333 !important;
    border: 0 !important;
    position: static !important;
  }
  .browBox {
    width: 100vw;
    height: 150px;
    background: #e6e6e6;
    position: absolute;
    bottom: 50px;
    left: 0;
    overflow-y: scroll;
  }
}
</style>